<template>
  <div class="wraper">
    <div @click="toOrder" class="swipe-box">
      <mt-swipe :auto="3000">
        <mt-swipe-item v-for="(item, index) in items" :key="index">
          <img :src="item.url" class="img"/>
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="inform">
      <div class="fl">通知：</div>
      <NoticeCarousel :contentArr="informs"></NoticeCarousel>
    </div>
    <!--办信用卡-->
    <div class="content">
      <div class="title">
        <span class="content-title">办信用卡</span><span @click="toCard" class="fr more">全部银行</span>
      </div>
      <div class="bank-list">
        <div><span>广发银行</span></div>
        <div><span>招商银行</span></div>
        <div><span>交通银行</span></div>
        <div><span>浦发银行</span></div>
        <div><span>广发银行</span></div>
        <div><span>招商银行</span></div>
        <div><span>交通银行</span></div>
        <div><span>浦发银行</span></div>
      </div>
    </div>
    <!--邀请会员-->
    <div class="content">
      <div class="title">
        <span class="content-title">邀请会员</span>
      </div>
      <router-link tag="div" to="/inviteVip" class="invite-vip">
        <img :src="vipImg" alt="">
      </router-link>
    </div>
    <!--邀请办卡-->
    <div class="content">
      <div class="title">
        <span class="content-title">邀请办卡</span>
      </div>
      <div class="invite-card">
        <img :src="cardImg" alt="">
      </div>
    </div>
    <!--热门文章-->
    <div class="content clearfix">
      <div class="title">
        <span class="content-title">热门文章</span><span class="fr more">查看更多</span>
      </div>
      <div class="hot-article">
        <div class="article clearfix">
          <div class="article-title fl">
            <div>什么是加粉？如何正确快速得加粉？就让我来告诉你，赶紧行动起来赚取现...</div>
            <span>2018-10-12</span>
          </div>
          <img class="fr" :src="vipImg" alt="">
        </div>
        <div class="article clearfix">
          <div class="article-title fl">
            <div>什么是加粉？如何正确快速得加粉？就让我来告诉你，赶紧行动起来赚取现...</div>
            <span>2018-10-12</span>
          </div>
          <img class="fr" :src="vipImg" alt="">
        </div>
        <div class="article clearfix">
          <div class="article-title fl">
            <div>什么是加粉？如何正确快速得加粉？就让我来告诉你，赶紧行动起来赚取现...</div>
            <span>2018-10-12</span>
          </div>
          <img class="fr" :src="vipImg" alt="">
        </div>
        <div class="article clearfix">
          <div class="article-title fl">
            <div>什么是加粉？如何正确快速得加粉？就让我来告诉你，赶紧行动起来赚取现...</div>
            <span>2018-10-12</span>
          </div>
          <img class="fr" :src="vipImg" alt="">
        </div>
      </div>
      <div class="bottom">就这么多啦~</div>
    </div>
  </div>
</template>
<script>
  import NoticeCarousel from '../../components/noticeCarousel/noticeCarousel'
  import { browserMixin } from '../../assets/js/mixin'

  export default {
    name: 'home',
    mixins: [browserMixin],
    components: {NoticeCarousel},
    data() {
      return {
        animate: false,
        items: [{
          title: '图片1',
          url: require('../../assets/imgs/banner.png')
        }, {
          title: '图片2',
          url: require('../../assets/imgs/banner.png')
        }],
        informs: [],
        vipImg: require('../../assets/imgs/invite-vip.png'),
        cardImg: require('../../assets/imgs/invite-card.png')
      }
    },
    created() {
      this.getBannerImg();
      this.getInform();
    },
    mounted() {

    },
    methods: {
      wxLogin() {

      },
      getBannerImg() {
        let banerImgParams = {
          pageNum: 0,
          pageSize: 10,
          status: 1
        }
        this.$http.bannerImg(banerImgParams).then(res => {
          console.log('banerImgParams', res);
        }).catch(err => {
          console.log(err)
        })
      },
      getInform() {
        let informParams = {pageSize: 10}
        this.$http.inform(informParams).then(res => {
          this.informs = res.data;
        }).catch(err => {
          console.log(err);
        })
      },
      toOrder() {
        this.$router.push('/vipDetail')
      },
      toCard() {
        this.$router.push('/card')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .wraper {
    min-height: calc(100vh - 1rem);
    background-color: #f1f0ee;
    padding-bottom: 1rem;
    .swipe-box {
      overflow: hidden;
      width: 100%;
      height: 2.6rem;
      img {
        width: 100%;
        height: 2.6rem;
      }
    }
    .inform {
      width: 100%;
      height: .88rem;
      line-height: .88rem;
      font-size: .26rem;
      box-sizing: border-box;
      padding: 0 0 0 .8rem;
      background: #f8f8f4 url("../../assets/imgs/icon-inform.png") no-repeat .3rem center;
      background-size: .4rem;
    }
    .content {
      width: 100%;
      box-sizing: border-box;
      background: #f8f8f4;
      padding: 0 .3rem;
      margin-top: .2rem;
      box-shadow: 0 0 10px rgba(0, 0, 0, .1);
      .title {
        font-size: .3rem;
        height: .6rem;
        line-height: .6rem;
        margin-bottom: .1rem;
        .content-title {
          padding-left: .2rem;
          font-weight: bold;
          background: url("../../assets/imgs/icon-title.png") no-repeat left center;
          background-size: .06rem .28rem;
        }
        .more {
          color: #666;
          padding-right: .25rem;
          background: url("../../assets/imgs/icon-right.png") no-repeat right .18rem;
          background-size: .19rem .26rem;
        }
      }
      /*办信用卡*/
      .bank-list {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: .25rem;
        div {
          flex: 1;
          height: 1.4rem;
          width: 25%;
          min-width: 25%;
          max-width: 25%;
          text-align: center;
          &:nth-child(1) {
            background: url("../../assets/imgs/icon-gfbank.png") no-repeat center top;
            background-size: .9rem;
          }
          &:nth-child(2) {
            background: url("../../assets/imgs/icon-zsbank.png") no-repeat center top;
            background-size: .9rem;
          }
          &:nth-child(3) {
            background: url("../../assets/imgs/icon-jtbank.png") no-repeat center top;
            background-size: .9rem;
          }
          &:nth-child(4) {
            background: url("../../assets/imgs/icon-pfbank.png") no-repeat center top;
            background-size: .9rem;
          }
          &:nth-child(5) {
            background: url("../../assets/imgs/icon-gfbank.png") no-repeat center top;
            background-size: .9rem;
          }
          &:nth-child(6) {
            background: url("../../assets/imgs/icon-zsbank.png") no-repeat center top;
            background-size: .9rem;
          }
          &:nth-child(7) {
            background: url("../../assets/imgs/icon-jtbank.png") no-repeat center top;
            background-size: .9rem;
          }
          &:nth-child(8) {
            background: url("../../assets/imgs/icon-pfbank.png") no-repeat center top;
            background-size: .9rem;
          }

          span {
            display: block;
            margin-top: 1rem;
          }
        }
      }
      /*邀请会员*/
      .invite-vip {
        width: 100%;
        height: 2.3rem;
        padding-bottom: .25rem;
        img {
          width: 100%;
          height: 2.3rem;
        }
      }
      /*邀请办卡*/
      .invite-card {
        width: 100%;
        height: 2.3rem;
        padding-bottom: .25rem;
        img {
          width: 100%;
          height: 2.3rem;
        }
      }
      /*热门文章*/
      .hot-article {
        width: 100%;
        /*margin-bottom: 0.6rem;*/
        .article {
          width: 100%;
          padding: .25rem 0;
          border-bottom: 1px solid #eee;
          .article-title {
            position: relative;
            /*width: 4.4rem;*/
            width: calc(100% - 2.3rem);
            height: 1.4rem;
            div {
              font-size: .26rem;
              line-height: 0.4rem;
            }
            span {
              position: absolute;
              bottom: 0;
              left: 0;
              font-size: .16rem;
              color: #999;
            }
          }
          img {
            width: 2.2rem;
            height: 1.4rem;
            /*background: blue;*/
          }
        }
      }
      .bottom {
        height: .6rem;
        text-align: center;
        line-height: .6rem;
      }
    }
  }
</style>
